<template>
  <div>
    <div >
      <van-nav-bar class="dv" title="探途">
        <template #right>
          <van-icon name="manager" size="30px"   @click="toUser()" />
        </template>
        <template #left>
          <van-icon name="shop" size="30px"   @click="jiudian()" />
        </template>
      </van-nav-bar>
    </div>
    <div class="search1">
      <van-search
          @click="search()"
          shape="round"
          background="#FFF0F3"
          placeholder="探索行程"
      />
    </div>
    <div style="margin-top: 10px">
      <van-row>
        <van-col span="4"><p style="color:orange;font-size: 20px;text-align: right">●</p></van-col>
        <van-col span="8"><p style="font-size: 20px;font-weight: bolder;text-align: left ;margin-left: 10px">热门精选</p></van-col>
        <van-col @click="dj1()" span="12"><router-link to="/游记文章" style="font-size: 15px;"><p style="text-align: right;margin-right: 40px;margin-top: 20px">更多</p></router-link></van-col>
      </van-row>
    </div>
    <div>
      <van-row >
        <van-col span="12" v-for="a in articles">
          <div class="dv1" @click="toArticles(a)">
            <img :src="a.imgurl" class="img1">
          <p class="p1">{{ a.title }}</p>
          <p class="p2">{{a.content}}</p></div></van-col>
      </van-row>
    </div>
    <div style="margin-top: 10px">
      <van-row>
        <van-col span="4"><p style="color:orange;font-size: 20px;text-align: right">●</p></van-col>
        <van-col span="8"><p style="font-size: 20px;font-weight: bolder;text-align: left ;margin-left: 10px">自由行</p></van-col>
        <van-col span="12"><router-link to="/景点文章" style="font-size: 15px;"><p style="text-align: right;margin-right: 40px;margin-top: 20px">更多</p></router-link></van-col>
      </van-row>
    </div>
    <div>
      <van-row >
        <van-col span="12" v-for="ad in advertisements">
          <div class="dv1" @click="toAdvs(ad)">
            <img :src="ad.imgurl" class="img1">
            <p class="p3">{{ad.info}}</p>
          </div></van-col>
      </van-row>
    </div>
    <div>
      <van-row>
        <van-col span="4"><p style="color:orange;font-size: 20px;text-align: right">●</p></van-col>
        <van-col span="8"><p style="font-size: 20px;font-weight: bolder;text-align: left ;margin-left: 10px">景区风光</p></van-col>
        <van-col span="12" @click="dianji()"><router-link to="/平铺列表" style="font-size: 15px;"><p style="text-align: right;margin-right: 40px;margin-top: 20px">更多</p></router-link></van-col>
      </van-row>
    </div>
    <div>
      <van-row >
        <van-col span="12"  v-for="att in attractions" >
          <div class="dv2">
            <img :src="att.imgurl" class="img2" @click="toAttractions(att)">
            <p class="p4">{{ att.name }}</p>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data(){
    return{
      articles:[{
        atid:"",
        title:"",
        content:"",
        imgurl:""
      }],
      advertisements:[{
        id:"",
        info:"",
        imgurl:""
      }],
      attractions:[{
       name:"",
        city:"",
        imgurl:""
      }],
    }
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 8) {
        return value.slice(0,8) + '...'
      }
      return value
    }
  }
,methods:{
    toUser(){
      this.$router.push('/set')
    },dj1(){
      this.$router.push('/attdto')
    },dianji(){
      this.$router.push('/tile')
    },
    toArticles(a){
      this.$store.commit("setAtid",a.atid);
      this.$router.push({path:"/article",query:{id:a.atid}})
      console.log(a.atid)
    },
    toAdvs(ad){
      this.$store.commit("setAdid",ad.id);
      this.$router.push({path:"/detail",query:{id:ad.id}})
      console.log(ad.id)
    },
    search(){
      this.$router.push("/search");
    },jiudian(){
      this.$router.push("/housinfo");
    }
  },mounted() {
    selectAtricles:{
      this.axios.get("/api/article/indexselect.do").then(r=>{
        if (r.data.code==200){
          this.articles=r.data.data;
        }
      })
    }
    selectAttractions:{
      this.axios.get("/api/attractions/selectIndex.do").then(r=>{
        if (r.data.code==200){
          this.attractions=r.data.data;
        }
      })
    }
    selectAdvs:{
      this.axios.get("/api/advertisement/indexselect.do").then(r=>{
        if (r.data.code==200){
          this.advertisements=r.data.data;
        }
      })
    }

  }


}
</script>

<style scoped>

::v-deep .van-nav-bar__title {
  font-size: 20px;

}

.search1{
  width: 80%;
  margin-top: 20px;
  margin:  auto;

}
.dv1{

  margin: auto;
  border-style: solid;
  border-color: silver;
  height:200px;
  width:75%;
}
.dv2{
  position: relative;
  margin: auto;
  height:200px;
  width:75%;
  margin-top: 10px;
}
.img1{
  width: 100%;
  height: 50%;
}
.img2{
  width: 100%;
  height: 100%;
}
.p1{
  text-align: left;
  margin-left: 5px;
  font-weight: bold;
}
.p2{
  text-align: left;
  font-size: 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.p3{
  font-size: 12px;
  line-height: 24px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;

}
.p4{
  position: absolute;
  top: 0;
  font-size: 20px;
  color: white;
  font-weight: bolder;
  margin-left: 10px;
}
</style>